<script setup lang="ts">
import { ref, watchEffect, withDefaults } from "vue";

const props = withDefaults(
    defineProps<{
        visible: boolean;
        confirmMethod: ((...args: any[]) => any) & ((...args: any[]) => void);
        title: string;
        content: string;
        icon: string;
        hideAllButton?: boolean;
        hideCancelButton?: boolean;
    }>(),
    {
        visible: false,
        confirmMethod: () => { },
        title: "",
        content: "",
        icon: "",
        hideAllButton: false,
        hideCancelButton: false,
    }
);

const emits = defineEmits<{
    (e: "close", value: boolean): void;
}>();

const show = ref(false);

const close = () => {
    show.value = false;
    emits("close", show.value);
};

watchEffect(() => {
    show.value = props.visible;
});
</script>

<template>
    <el-dialog class="common-dialog" v-model="show" :title="title" align-center width="400" @closed="close">
        <div class="content">
            <img :src="icon" class="common-dialog-icon" alt="">
            <div class="icon-text">{{ content }}</div>
        </div>
        <template #footer v-if="!hideAllButton">
            <div class="dialog-footer">
                <el-button class="cancel-button" v-if="!hideCancelButton" @click="show = false">取消</el-button>
                <el-button class="confirm-button" @click="confirmMethod">
                    确认
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<style scoped lang="scss">
.content {

    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
}

.confirm-button {
    color: #fff;
    border-radius: 4px;
    /* 主色蓝 */
    background: #2258F6;
}

.common-dialog-icon {
    width: 20px;
    height: 20px;
    margin-right: 5px;
}

.icon-text {
    font-family: PingFang SC;
    font-size: 14px;
    font-weight: normal;
    line-height: 22px;
    letter-spacing: normal;
    /* 中性/文字/@color-text-300 */
    color: #1A1A1A;
}
</style>